<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 16:52:53
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-11-14 19:54:07
 * @Description: 
 -->
<template>
  <grimm-page type="menu-view" title="Menu">
    <div slot="content">
      <grimm-navbar :options="options" @onBack="() => $refs.menu.show()">
        <div slot="navBarLeftBtn">
          <i class="iconfont menu" style="color: #fff;font-size: 20px;"></i>
        </div>
      </grimm-navbar>
      <grimm-menu ref="menu" :options="menuOptions"></grimm-menu>
    </div>
  </grimm-page>
</template>
<script>
import GrimmPage from 'example/components/GrimmPage';
import routeList from 'example/router/routes.js';

export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      menuState: false,
      options: {
        bgColor: '#2c2c2d',
        textColor: '#fff',
        transitonName: 'v',
        title: '菜单组件',
        operateBtns: [
          {
            type: 'icon',
            text: 'more',
            onClick: () => {
              this.toast = this.$createToast({
                time: 1500,
                txt: '点击了【...】按钮',
              });
              this.toast.show();
            },
          },
        ],
      },
      menuOptions: {
        width: '100%',
        list: routeList.default,
      },
    };
  },
  mounted() {
    console.log(routeList.default);
  },
  methods: {},
};
</script>